<template>
	<section>
		<!--工具条-->
		<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
			<el-form :inline="true" :model="filters">
				<el-form-item label="申请日期">
				    <el-date-picker v-model="filters.dataFrom" type="date" placeholder="开始日期" @change="fnGetStart"></el-date-picker>
				    	至
					<el-date-picker v-model="filters.dataTo" type="date" placeholder="结束日期" @change="fnGetEnd"></el-date-picker>
				</el-form-item>
				<el-form-item label="申请人">
					<el-input class="input-new-tag" placeholder="请输入申请人姓名" v-model="filters.applicant" style="width: 140px;"></el-input>
				</el-form-item>
				<el-form-item label="申请部门">
					<el-select placeholder="请选择申请部门" v-model="filters.dept" style="width: 160px;">
						<el-option v-for="item in depts" :key="item.ORGANIZATION_NAME" :label="item.ORGANIZATION_NAME" :value="item.ORGANIZATION_NAME">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="申请类型">
					<el-select placeholder="请选择申请类型" v-model="filters.category" style="width: 100px;">
						<el-option v-for="item in categorys" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="用餐地点">
					<el-select placeholder="请选择用餐地点" v-model="filters.room" style="width: 192px;">
						<el-option v-for="item in rooms" :key="item" :label="item" :value="item">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="用餐类型">
					<el-select placeholder="请选择用餐类型" v-model="filters.mealType" style="width: 192px;">
						<el-option v-for="item in diningTypes" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="fnGetReport">查询</el-button>
				</el-form-item>
				<el-form-item>
					<el-button type="warning" @click="fnExcel">导出Excel</el-button>
				</el-form-item>
			</el-form>
		</el-col>
		
		<!--人数列表-->
		<el-col :span="16" class="total-list">
			<el-col>早餐：<span class="val">{{stat.Breakfast}}人</span></el-col>
			<el-col>午餐：<span class="val">{{stat.Dinner}}人</span></el-col>
			<el-col>晚餐：<span class="val">{{stat.Supper}}人</span></el-col>
			<el-col>总人数：<span class="val">{{stat.Total}}人</span></el-col>
		</el-col>
		
		<!--统计列表-->
		<el-table :data="reports" border v-loading="reportsLoading" class="reports-list">
			<el-table-column type="index" label="#" width="60">
			</el-table-column>
			<el-table-column prop="Category" label="申请类型" width="100">
			</el-table-column>
			<!--<el-table-column label="申请人" width="200">-->
				<!--<template scope="scope">-->
					<!--<p>{{scope.row.Applicant}} -  {{scope.row.Mobile}}</p>-->
				<!--</template>-->
			<!--</el-table-column>-->
			<el-table-column prop="Applicant" label="申请人" width="180">
			</el-table-column>
			<el-table-column prop="Dept" label="申请部门" width="180">
			</el-table-column>
			<el-table-column prop="Createdtime" label="申请时间" width="120" :formatter="fnDateFormat">
			</el-table-column>
			<el-table-column prop="VisitorDept" label="来访单位" width="200">
			</el-table-column>
			<!--<el-table-column prop="VisitorLevel" label="来访级别" width="100">-->
			<!--</el-table-column>-->
			<el-table-column prop="Room" label="就餐地点" width="100">
			</el-table-column>
			<el-table-column prop="MealNum" label="就餐人数" width="100" :formatter="fnMealNumFormat">
			</el-table-column>
			<el-table-column label="用餐时间" min-width="150">
				<template scope="scope">
					<p>{{scope.row.VisitDate | moment}} <strong style="color: #FFA500;">{{scope.row.MealType}}</strong></p>
				</template>
			</el-table-column>
			<el-table-column prop="Approvedby" label="审批人" width="100">
			</el-table-column>
		</el-table>
		
		<!--工具条-->
		<el-col :span="24" class="toolbar">
			<el-pagination layout="total, prev, pager, next" @current-change="fnPaginationChange" :page-size="size" :total="total" style="float:right;">
			</el-pagination>
		</el-col>
	</section>
</template>

<script>
    import Svc from '../service/index.js'
    import moment from 'moment'
	export default {
		data() {
			return {
				filters : {
					dataFrom : (moment(new Date(new Date().setMonth((new Date().getMonth()-1)))).format('YYYY-MM-DD')) + " " + "00:00:00",
					dataTo : (moment(new Date()).format('YYYY-MM-DD')) + " " + "23:59:59",
					dept : '全部', //申请部门
					room : '全部', //餐厅
					applicant : '', //申请人姓名
					mealType : 99,
					category :99
				},
				//用餐类型
		        diningTypes : [{
		        	label : "全部",
		        	value : 99
		        },{
		        	label : "早餐",
		        	value : 0
		        },{
		        	label : "午餐",
		        	value : 1
		        },{
		        	label : "晚餐",
		        	value : 2
		        }],
		        //申请类型
		        categorys : [{
		        	label : "全部",
		        	value : 99
		        },{
		        	label : "标准",
		        	value : 0
		        },{
		        	label : "补单",
		        	value : 1
		        }],
		        rooms:["全部"], //所有餐厅
		        depts : [{
		        	ORGANIZATION_NAME : '全部'
		        }],//所有部门
		        reportsLoading : false,
		        reports : [],
		        stat : {},
		        total:0,
				skip:0,
				size:20
			}
		},
		methods: {
			//显示message提示框
            openMessage : function(msg,type){
    	        this.$message({
		          	showClose: true,
		          	message: msg,
		          	type: type
		        });
            },
            //时间格式化  
            fnDateFormat(row, column) {
                var date = row[column.property];  
	          	if (date == undefined) {  
	             	return "----";  
	          	}  
	          	return moment(date).format("YYYY-MM-DD");  
            },
            //格式化就餐人数
            fnMealNumFormat(row, column){
                var val = row[column.property];  
	          	return val + "人";  
            },
            //获取开始日期
			fnGetStart(val){
				if (val) {
					this.filters.dataFrom = val + " " + "00:00:00"
				} else {
					this.filters.dataFrom = val
				}
			},
			//获取结束日期
			fnGetEnd(val){
				if (val) {
					this.filters.dataTo = val + " " + "23:59:59"
				} else {
					this.filters.dataTo = val
				}	
			},
            //获取所有餐厅及餐费
			fnGetRoomAndPrices(){
				var that = this
	            Svc.fnGetData('/api/dataconfig',{},function(res){
	            	if (res.body.ErrCode == 0){
	            		that.rooms = that.rooms.concat(res.body.Data.Room)
	            	} else {
	            		that.openMessage("当前用餐申请获取失败！",'error')
	            	}
	            },function(res){
	            	that.openMessage("网络错误，请重新！",'error')
	            })
			},
            //获取所有部门信息
		    fnGetDepts(){
		    	var that = this
	            Svc.fnGetData('/api/account/alldepts',{},function(res){
	            	if (res.body.ErrCode == 0){
	            		that.depts = that.depts.concat(res.body.Data)
	            	} else {
	            		that.openMessage("部门信息获取失败！",'error')
	            	}
	            },function(res){
	            	that.openMessage("网络错误，请重新！",'error')
	            })
		    },
		    //获取报表
		    fnGetReport(){
		    	var that = this
		    	that.reportsLoading = true
		    	var params = {
		    		DataFrom : that.filters.dataFrom,
		    		DateTo : that.filters.dataTo,
		    		Room : that.filters.room,
		    		Category : that.filters.category,
		    		MealType : that.filters.mealType,
		    		Dept : that.filters.dept,
		    		Applicant : that.filters.applicant,
		    		Skip: that.skip*that.size,
					Size: that.size
		    	}
		    	
		    	if (params.Room == "全部") { params.Room = "" }
		    	if (params.Dept == "全部") { params.Dept = "" }
		    	
	            Svc.fnPostData('/api/report/application',params,function(res){
	            	if (res.body.ErrCode == 0){
	            		that.reports = res.body.Data.List
	            		that.total = res.body.Data.Total
	            		that.stat = res.body.Data.Stat
	            	} else {
	            		that.openMessage("报表记录获取失败！",'error')
	            	}
	            	that.reportsLoading = false
	            },function(res){
	            	that.openMessage("网络错误，请重新！",'error')
	            })
		    },
            //分页
            fnPaginationChange(val) {
                this.skip = val-1;
                this.fnGetReport();
            },
			//导出Excel
            fnExcel() {
                var that = this
                var params = {
                    DataFrom : that.filters.dataFrom,
                    DateTo : that.filters.dataTo,
                    Room : that.filters.room,
                    Category : that.filters.category,
                    MealType : that.filters.mealType,
                    Dept : that.filters.dept,
                    Applicant : that.filters.applicant
                }

                if (params.Room == "全部") { params.Room = "" }
                if (params.Dept == "全部") { params.Dept = "" }

				window.location.href = '/api/report/export?data='+ JSON.stringify(params)
            }
		},
		mounted() {
			//获取所有餐厅及餐费
			this.fnGetRoomAndPrices()
			//获取所有部门信息
		    this.fnGetDepts()
		    //获取报表
		    this.fnGetReport()
		}
	}
</script>

<style scoped>
	.reports-list{
		width: 100%;
		margin-top: 20px;
	}

	.toolbar {
	    background: #f2f2f2;
	    padding: 10px;
	    margin: 10px 0;
	}
	
	.total-list {
		display: flex;
	    flex-direction: row;
	    margin:10px 0 20px 0;
	    color: #1f2d3d;
	    font-size: 15px;
	    font-family: "微软雅黑";
	}
	
	.total-list .val{
		font-weight: bold;
		color: #ff4500;
	}
</style>